<template>
	<div>
		<div class="show-plate">
			<div class="lists">
				<div class="list" v-for="(item, index) in listData">
					<div class="list-content" @mouseover.stop="changeIconMore(3, index)" @mouseleave.stop="changeIconMore(2, index)">
						<div class="more-operation" @mouseover.stop="changeIconMore(1, index)" @mouseleave.stop="changeIconMore(2, index)">
							<img :src="item.iconMoreShow">
							<img :src="iconEditShow" @click="showModel(1, item)" @mouseover="iconEditShow = iconEditActive" @mouseleave="iconEditShow = iconEdit">
							<img :src="iconDelShow" @click="showModel(2, item)" @mouseover="iconDelShow = iconDelActive" @mouseleave="iconDelShow = iconDel">
							<img :src="iconFnShow" @click="showModel(3, item)" @mouseover="iconFnShow = iconFnActive" @mouseleave="iconFnShow = iconFn">
							<img :src="iconExpShow" @click="showModel(4, item)" @mouseover="iconExpShow = iconExpActive" @mouseleave="iconExpShow = iconExp">
						</div>
						<div class="shade"></div>
						<div class="top">
							<div class="key">任务名称</div>
							<div class="model-name fs24 text-overflow" @click="showModelSet(item)">{{item.modelName}}</div>
						</div>
						<div class="mid">
							<div class="info-list w100">
								<div class="key">系统名称</div>
								<div class="val text-overflow-2">{{item.sysName}}</div>
							</div>
							<div class="info-list w100">
								<div class="key">分系统名称</div>
								<div class="val text-overflow-2">{{item.sysSubName}}</div>
							</div>
							<div class="info-list w60">
								<div class="key">设备代号</div>
								<div class="val text-overflow">{{item.deviceCode}}</div>
							</div>
							<div class="info-list w40">
								<div class="key">数量</div>
								<div class="val">{{item.deviceNum}}</div>
							</div>
							<div class="info-list w100">
								<div class="key">设备名称</div>
								<div class="val text-overflow-2">{{item.deviceName}}</div>
							</div>
						</div>
						<div class="bot">
							<div class="operation">
								<div class="key">任务状态</div>
								<div class="btn type1" v-if="item.sendStatus.code == 'N'" @click="taskIssuedhandle(item.id)">
									<img src="../assets/images/icon-down.png">
									<span>未下发</span>
								</div>
								<div class="btn type3" v-else @click="lookTask(item.id)">
									<img src="../assets/images/icon-search.png">
									<span>查看</span>
								</div>
							</div>
							<div class="operation">
								<div class="key">试验结果</div>
								<div class="btn type2" v-if="item.compUpload.code == 'N'">
									<img src="../assets/images/icon-file.png">
									<span>暂无</span>
								</div>
								<div class="btn type3" v-else @click="showTaskResultHandle(item)">
									<img src="../assets/images/icon-upload.png">
									<span>已上传</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="list">
					<div class="add-model" @click="showModel(1)">
						<img src="../assets/images/icon-add-gray.png">
						<span class="fs18 color505971">新增任务</span>
					</div>
				</div>
			</div>
			<div class="pagin" v-if="viewData">
				<!-- <div class="custom-btn" @click="currentChange(1)">首页</div>
				<el-pagination background layout="prev, pager, next" :page-size="viewData.pageSize" :total="viewData.total" :page-count="viewData.pages" :current-page="viewData.pageNum" prev-text="上一页" next-text="下一页" @current-change="currentChange"></el-pagination>
				<div class="custom-btn" @click="currentChange(viewData.pages)">尾页</div> -->
				<el-pagination
					background
					layout="total, sizes, prev, pager, next, jumper"
					:page-size="viewData.pageSize"
					:total="viewData.total"
					:page-sizes="[5, 10, 20, 30, 40, 50, 100]"
					@size-change="sizeCurrentChange"
					@current-change="currentChange"
				>
				</el-pagination>
			</div>
		</div>
        <ModelSetting v-if="showSetting" :modelId="setModelId" :modelName="setModelName" @cancel="cancelSet"></ModelSetting>
        <TaskView v-if="showTaskView" :modelId="setModelId" @cancel="cancelTaskView"></TaskView>
        <TestResults v-if="showTaskResult" :modelId="setModelId" :modelName="setModelName" :deviceName="setDeviceName" @cancel="cancelTaskResult"></TestResults>
        <TaskIssued v-if="showTaskIssued" :modelId="setModelId" @cancel="cancelTaskIssued"></TaskIssued>
	</div>
</template>

<script>
import ModelSetting from '@/components/ModelSetting'
import TaskView from '@/components/TaskView'
import TestResults from '@/components/TestResults'
import TaskIssued from '@/components/TaskIssued'
import Bus from '@/assets/js/bus.js'
export default {
    name: 'ShowPlate',
    props: {
    	viewData: Object, //总览数据
    	listData: Array //总览列表数据
    },
    components: {ModelSetting, TaskView, TestResults, TaskIssued},
    data () {
        return {
            iconMoreHover: require("../assets/images/icon-more-hover.png"),
            iconMoreActive: require("../assets/images/icon-more-active.png"),
            iconMore: require("../assets/images/icon-more.png"),
            iconEditShow: require("../assets/images/icon-edit.png"),
            iconEditActive: require("../assets/images/icon-edit-active.png"),
            iconEdit: require("../assets/images/icon-edit.png"),
            iconDelShow: require("../assets/images/icon-del.png"),
            iconDel: require("../assets/images/icon-del.png"),
            iconDelActive: require("../assets/images/icon-del-active.png"),
            iconFnShow: require("../assets/images/icon-set.png"),
      		iconFn: require("../assets/images/icon-set.png"),
      		iconFnActive: require("../assets/images/icon-set-active.png"),
			iconExpShow: require("../assets/images/export.png"),
      		iconExp: require("../assets/images/export.png"),
      		iconExpActive: require("../assets/images/export-active.png"),
            newListData: [],
            showSetting: false, //显示型号设置弹窗
            setModelId: '', //设置型号id
            setModelName: '', //设置型号名称
            setDeviceName: '', //设置设备名称
            showTaskView: false, //显示查看任务弹窗
            showTaskResult: false, //显示试验结果弹窗
            showTaskIssued: false //显示任务下发弹窗
        }
    },
    created() {
    	let _this = this;
    	Bus.$on('issued', (val) => {
            _this.taskIssuedhandle(val);
        });
    },
    methods: {
    	/**
    	 * 鼠标移入移出更多按钮
    	 * @param {Number} type - 1移入 2移出
    	 * @param {Number} index - 操作数据下标
    	 */
    	changeIconMore(type, index) {
    		let temp = this.listData[index];
    		if (type == 1) {
    			temp.iconMoreShow = this.iconMoreActive;
    		} else if (type == 2) {
    			temp.iconMoreShow = this.iconMore;
    		} else if (type == 3) {
    			temp.iconMoreShow = this.iconMoreHover;
    		}
    		this.$set(this.listData, index, temp);
    	},
    	/**
         * 页数发生变化
         * @param {Number} e - 当前页数
         */
    	currentChange(e) {
    		this.$emit('pageQuery', e);
    	},
		sizeCurrentChange(e) {
			this.$emit('pageSizeQuery', e)
		},
    	/**
    	 * 显示新增/编辑弹窗
    	 * @param {Number} type - 弹窗类型
    	 * @param {Object} row - 操作数据
    	 */
    	showModel(type, row) {
    		this.$emit('showModel', type, row);
    	},
    	/**
    	 * 显示型号设置弹窗
    	 * @param {Object} row - 操作数据
    	 */
    	showModelSet(row) {
    		this.setModelId = row.id;
    		this.setModelName = row.modelName;
    		this.showSetting = true;
    	},
    	// 关闭型号设置弹窗
    	cancelSet() {
    		this.showSetting = false;
    	},
    	/**
    	 * 显示任务查看弹窗
    	 * @param {Number} id - 型号id
    	 */
    	lookTask(id) {
    		this.setModelId = id;
    		this.showTaskView = true;
    	},
    	// 关闭查看任务弹窗
    	cancelTaskView() {
    		this.showTaskView = false;
    	},
    	/**
    	 * 显示试验结果弹窗
    	 * @param {Object} row - 操作数据
    	 */
    	showTaskResultHandle(row) {
    		this.setModelId = row.id;
    		this.setModelName = row.modelName;
    		this.setDeviceName = row.deviceName;
    		this.showTaskResult  = true;
    	},
    	// 关闭试验结果弹窗
    	cancelTaskResult() {
    		this.showTaskResult = false;
    	},
    	/**
    	 * 任务下发
    	 * @param {Number} id - 型号id
    	 */
    	taskIssuedhandle(id) {
    		this.setModelId = id;
    		this.showTaskIssued  = true;
    	},
    	// 关闭任务下发弹窗
    	cancelTaskIssued() {
    		this.showTaskIssued = false;
    	}
    }
}
</script>

<style scoped lang='less'>
    @import url('../assets/css/public.css');
    .show-plate {width: 100%;padding: 0 85rem;
		.lists {width: 100%;display: flex;flex-wrap: wrap;
			.list {width: 20%;height: 390rem;margin-top: 10rem;padding: 0 15rem;
				.list-content {width: 100%;height: 100%;background: #F4F5F8;border: 1px solid #D0D6E3;border-radius: 3rem;position: relative;padding-top: 10rem;
					.more-operation {width: 30rem;height: 30rem;position: absolute;top: 10rem;right: 10rem;display: flex;flex-direction: column;z-index: 3;
						img {width: 30rem;height: 30rem;border-top: 2rem solid transparent;display: none;cursor: pointer;}
						img:first-child {border-top: 0;display: block;}
					}
					.more-operation:hover {
						img {display: block;}
					}
					.more-operation:hover + .shade {display: block;}
					.shade {width: 100%;height: 100%;background: rgba(0,0,0,.3);position: absolute;top: 0;left: 0;display: none;z-index: 2;}
					.key {font-size: 18rem;color: #505971;}
					.top {width: 100%;padding: 0 26rem;
						.model-name {color: #285FE3;text-decoration: underline;cursor: pointer;}
					}
					.mid {width: 100%;display: flex;flex-wrap: wrap;
						.info-list {width: 50%;padding-left: 26rem;margin-top: 3rem;
							.val {min-height: 24rem; width: 100%;font-size: 24rem;color: #161D2E;}
						}
						.w40 {width: 40%;}
						.w60 {width: 60%;}
						.w100 {width: 100%;}
					}
					.bot {width: 100%;height: 84rem;border-top: 1px solid #D0D6E3;display: flex;position: absolute;bottom: 0;
						.operation {width: 50%;height: 100%;border-left: 1px solid #D0D6E3;padding-left: 26rem;padding-top: 5rem;
							.btn {width: 100rem;height: 34rem;background: linear-gradient(0deg, #D8DCE7 0%, #FFFFFF 100%);border-radius: 3px;display: flex;align-items: center;justify-content: center;margin-top: 5rem;cursor: pointer;
								span {font-size: 18rem;}
							}
							.btn.type1 {border: 1px solid #316EFF;
								img {width: 20rem;height: 20rem;margin-right: 6rem;}
								span {color: #285FE3;}
							}
							.btn.type2 {border: 1px solid #FB7831;
								img {width: 16rem;height: 20rem;margin-right: 10rem;}
								span {color: #EE5400;}
							}
							.btn.type3 {border: 1px solid #0CE392;
								img {width: 20rem;height: 20rem;margin-right: 6rem;}
								span {color: #00A65E;}
							}
						}
						.operation:first-child {border-left: 0;}
					}
				}
				.list-content:hover {border: 1px solid #316EFF;}
				.add-model {width: 100%;height: 100%;background: #F4F5F8;border: 1px dashed #ABB3C3;border-radius: 3rem;display: flex;flex-direction: column;align-items: center;justify-content: center;cursor: pointer;
					img {width: 23rem;height: 23rem;margin-bottom: 10rem;}
				}
			}
		}
		.pagin {width: 100%;height: 34px;margin: 14rem auto 11rem;display: flex;justify-content: center;overflow: hidden;
			.custom-btn {width: 52px;height: 28px;line-height: 28px;text-align: center;background: linear-gradient(0deg, #D8DCE7 0%, #FFFFFF 100%);color: #505971;font-family: 'Microsoft YaHei';border: 1px solid #D0D6E3;font-size: 13px;margin-top: 2px;cursor: pointer;}
		}
    }
	
	// /deep/ .el-pagination.is-background .btn-prev {width: 66px;background: linear-gradient(0deg, #D8DCE7 0%, #FFFFFF 100%);color: #505971;font-family: 'Microsoft YaHei';border: 1px solid #D0D6E3;}
	// /deep/ .el-pagination.is-background .btn-next {width: 66px;background: linear-gradient(0deg, #D8DCE7 0%, #FFFFFF 100%);color: #505971;font-family: 'Microsoft YaHei';border: 1px solid #D0D6E3;}
	// /deep/ .el-pagination.is-background .el-pager li {background: linear-gradient(0deg, #D8DCE7 0%, #FFFFFF 100%);font-weight: 400;color: #505971;font-family: 'Microsoft YaHei';border: 1px solid #D0D6E3;}
	// /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {background: #409EFF;}
</style>